import { Grid } from 'antd-mobile';
import React, {Component} from 'react';
import CookBook from './CookBook.module.css'

class GridList extends Component {
    constructor(props) {
        super(props);
        this.state={
           hotList:[]
        }
    }
    componentDidMount() {
         this.getUserList()
    }

       async  getUserList(){
    const res=await this.$http.get('/hotcate')
        let data=res.data.map((value,i)=>({
            key:i,
            icon:value.img,
            text:value.title
        }))
        this.setState({hotList:data})
}
    render() {
        return (
            <div>
                <Grid data={this.state.hotList} columnNum={3} square={false}
                      renderItem={dataItem => (
                          <div className={CookBook.Griditem}>
                              <img src={dataItem.icon} alt="" />
                              <div>
                                  <span>{dataItem.text}</span>
                              </div>
                          </div>
                      )}
                />

            </div>
        );
    }
}

export default GridList;
